<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span class="title">全局配置</span>
        <el-button type="primary" :icon="Refresh" style="float: right;" @click="refresh">刷新数据</el-button>
      </div>
    </template>
    <div class="active-btn">
      <el-button :icon="Plus" type="primary" @click="createGlobalConfig">新增全局配置</el-button>
    </div>
    <CustomTable
      :tableData="tableData"
      :columns="tableColumns"
    >
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button 
            link 
            type="primary" 
            @click="handleEdit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </CustomTable>
  
    <el-dialog
      v-model="dialogVisible"
      title="编辑"
      :close-on-click-modal="false"
      destroy-on-close
      draggable
      @close="close"
    >
      <Detail v-bind="rowProps" @close="close" />
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted, h } from 'vue'
import { ElMessage, ElSwitch } from 'element-plus/dist/index.full.js'
import { Plus, Refresh } from '@element-plus/icons-vue'
import { selectGlobalConfigAPI, enableGlobalConfig } from '@/api'
import { formatDate } from '@/utils/tools'
import Detail from './__detail__.vue'

const tableData = ref([])
const tableColumns = ref([
  { label: '序号', type: 'index', width: '60' },
  { label: '配置键', prop: 'configKey', align: 'left', width: '200' },
  { label: '配置值', prop: 'configValue', align: 'left', width: '200' },
  { label: '配置描述', prop: 'description', align: 'left', width: '200' },
  { label: '创建时间', prop: 'createTimestamp', width: '200', render: ({row}) => h('span', {}, formatDate(row.createTimestamp)) },
  { label: '更新时间', prop: 'updateTimestamp', width: '200', render: ({row}) => h('span', {}, formatDate(row.updateTimestamp)) },
  { 
    label: '是否启用', 
    prop: 'enabled', 
    render: ({row}) => h(
      ElSwitch, 
      {
        modelValue: !!row.enabled,
        'onUpdate:modelValue': val => row.enabled = val,
        onChange: () => handleSwitchChange(row),
      }
    ) ,
    width: '100'
  },
])
const dialogVisible = ref(false)
const rowProps = ref(null)
const createGlobalConfig = () => {
  dialogVisible.value = true
}
const handleEdit = (row) => {
  dialogVisible.value = true
  rowProps.value = row
}
const close = () => {
  dialogVisible.value = false
  rowProps.value = null
  getData()
}

const refresh = () => {
  getData().then(res => {
    ElMessage.success('刷新成功')
  })
}
const handleSwitchChange = async (row) => {
  try {
    await enableGlobalConfig({ id: row.id, enabled: row.enabled ? 1 : 0 })
    ElMessage.success('状态更新成功')
  } catch (error) {
    row.enabled = !row.enabled // 回滚 UI 状态
    ElMessage.error('状态更新失败')
  }
}
const getData = () => {
  return new Promise((resolve, reject) => {
    selectGlobalConfigAPI().then(res => {
      tableData.value = res.data.rows
      resolve()
    })
  })
}

onMounted(() => {
  getData()
})
</script>
